<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>自加与循环</title>
    <script src="../../blockly_compressed.js"></script>
    <script src="../../blocks_compressed.js"></script>
    <script src="../../javascript_compressed.js"></script>
    <script src="../../msg/js/en.js"></script>
    <style>
      body {
        background-color: #fff;
        font-family: sans-serif;
      }

      .tip {
        margin: 0 auto;
        text-align: center;
        color: rgb(226, 98, 38);
        font-size: 20px;
      }

      .warning {
        text-align: center;
      }

      #blocksAmt {
        color: rgb(46, 155, 46);
      }

      .showBtn,
      .runBtn {
        background-color: rgb(65, 125, 153);
        border-radius: 4px;
        color: seashell;
      }
      .codePreview {
        width: 600px;
        height: 500px;
        border: solid #ddd 1px;
        margin: 0 800px;
      }
    </style>
  </head>
  <body>
    <p class="tip">使用自加运算和循环在有限的操作数下使初始值为0的变量sum变为10,并打印结果</p>
    <p class="warning">你还剩下<span id="blocksAmt"></span>步可用操作</p>
    <p>
      <button class="showBtn" onclick="showCode()">Show JavaScript</button>
      <button class="runBtn" onclick="runCode()">Run JavaScript</button>
    </p>

    <!-- 拖拽block的“画布” -->
    <div
      id="blocklyDiv"
      style="position: absolute; height: 500px; width: 600px;"
    ></div>

    <!-- 预配置的toolbox  xml-->
    <xml id="toolbox" style="display: none">
      <category name="循环" colour="%{BKY_LOGIC_HUE}">
        <block type="controls_for">
          <value name="FROM">
            <shadow type="math_number">
              <field name="NUM"></field>
            </shadow>
          </value>
          <value name="TO">
            <shadow type="math_number">
              <field name="NUM"></field>
            </shadow>
          </value>
          <value name="BY">
            <shadow type="math_number">
              <field name="NUM"></field>
            </shadow>
          </value>
        </block>
      </category>
      <category name="变量操作" colour="%{BKY_VARIABLES_HUE}">
        <block type="variables_get"> </block>
        <block type="variables_set">
          <value name="VALUE">
            <block type="math_number">
              <field name="NUM">0</field>
            </block>
          </value>
        </block>
      </category>
      <category name="数学运算" colour="%{BKY_MATH_HUE}">
        <block type="math_arithmetic">
          <value name="A">
            <shadow type="math_number"> </shadow>
          </value>
          <value name="B">
            <shadow type="math_number"> </shadow>
          </value>
        </block>
      </category>
      <category name="结果展示" colour="%{BKY_LOGIC_HUE}">
        <block type="text_print">
          <value name="TEXT">
            <shadow type="text">
              <field name="TEXT">abc</field>
            </shadow>
          </value>
        </block>
      </category>
    </xml>

    <!-- xml 默认上DOM的blocks -->
    <xml id="startBlocks" style="display: none">
      <block type="variables_set">
        <value name="VALUE">
          <block type="math_number">
            <field name="NUM">0</field>
          </block>
        </value>
      </block>
    </xml>

    <!-- 代码展示区 -->
    <div class="codePreview" id="codePreview"></div>

    <script>
      var demoWorkspace = Blockly.inject("blocklyDiv", {
        media: "../../media/",
        maxBlocks: 14,
        toolbox: document.getElementById("toolbox")
      });
      Blockly.Xml.domToWorkspace(
        document.getElementById("startBlocks"),
        demoWorkspace
      );

      function onchange(event) {
        var remain = demoWorkspace.remainingCapacity();
        document.getElementById("blocksAmt").textContent = remain;
        // 说是
        if (remain < 1) {
          document.getElementById("blocksAmt").style.color = "orange";
          return;
        } else if (remain < 4) {
          document.getElementById("blocksAmt").style.color = "red";
        }
      }

      demoWorkspace.addChangeListener(onchange);
      onchange();

      function showCode() {
        // Generate JavaScript code and display it.
        // 显示代码于右框
        Blockly.JavaScript.INFINITE_LOOP_TRAP = null;
        var code = Blockly.JavaScript.workspaceToCode(demoWorkspace);
        document.getElementById("codePreview").textContent = code;
      }

      function runCode() {
        // Generate JavaScript code and run it.
        // 防止死循环
        window.LoopTrap = 1000;
        Blockly.JavaScript.INFINITE_LOOP_TRAP =
          'if (--window.LoopTrap == 0) throw "Infinite loop.";\n';
        var code = Blockly.JavaScript.workspaceToCode(demoWorkspace);
        Blockly.JavaScript.INFINITE_LOOP_TRAP = null;
        try {
          eval(code);
          if (item === 10) {
            alert("bingo!");
          } else {
            alert("未达目标，结果值为" + item);
          }
        } catch (e) {
          alert(e);
        }
      }
    </script>
  </body>
</html>
